<!DOCTYPE html>
<html>
<head>
	<title>员工信息管理系统</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>	
	<style type="text/css">
		.next{
			float: right;
		}
		.el-menu-demo{
			margin-bottom: 20px;
		}
		#content{
			width:100%;
		}
	</style>

</head>
<body>
	<div id="root">
		<h2>员工信息管理系统</h2>

		<el-menu :default-active="ActiveIndex" class="el-menu-demo" mode="horizontal"  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="true">
  			<el-menu-item index="/person">员工管理</el-menu-item>
  			<el-submenu index="">
    			<template slot="title">数据管理</template>
    				<el-menu-item index="/salary">工资统计</el-menu-item>
    				<el-menu-item index="">选项2</el-menu-item>
    				<el-menu-item index="">选项3</el-menu-item>
    			</template>
			</el-submenu>
			<el-menu-item index="">综合管理</el-menu-item>
		</el-menu>


		<div id="content">
			<router-view></router-view>
		</div>


		<!-- <el-button type="primary" icon="el-icon-plus" class="next" @click="dialogVisibles=true">新增员工</el-button>
		<el-dialog :visible="dialogVisibles" title="新增员工" width="500px">
			<el-form label-width="100px">
				<el-form-item label="员工姓名">
					<el-input type="text" v-model="newItem.name"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input type="number" v-model="newItem.age"></el-input>
				</el-form-item>
				
				<el-form-item label="性别">
					<el-radio-group v-model="newItem.sex">
						<el-radio-button :label="1">男</el-radio-button>
						<el-radio-button :label="0">女</el-radio-button>
					</el-radio-group>
				</el-form-item>
				
				<el-form-item label="所属部门">
					<el-select v-model="newItem.department" placeholder="请选择">
						<el-option value="技术部"></el-option>
						<el-option value="市场部"></el-option>
						<el-option value="行政部"></el-option>
						<el-option value="安保部"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="薪资">
					<el-input type="number" v-model="newItem.salary"></el-input>
				</el-form-item>
				
				<el-form-item label="入职时间">
					<el-date-picker type="date" :picker-options="joinDateOptions" placeholder="选择日期" v-model="newItem.joinDate" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="是否在职">
					<el-radio-group v-model="newItem.status">
						<el-radio-button :label="1">在职</el-radio-button>
						<el-radio-button :label="0">离职</el-radio-button>
					</el-radio-group>
				</el-form-item>
				
				<el-form-item label="离职时间" v-if="!newItem.status">
					<el-date-picker type="date" placeholder="选择日期" v-model="newItem.leaveDate" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
			</el-form>

			<div slot="footer">
				<el-button @click="dialogVisibles=false">取消</el-button>
				<el-button type="primary" @click="addData">确认新增</el-button>
			</div>	
		</el-dialog>

		
		

		<el-table :data="person" stripe>
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="age" label="年龄">
			</el-table-column>
			<el-table-column prop="sex" label="性别">
				<template v-slot="date">
					<span>{{date.row.sex?"男":"女"}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="在职状态">
				<template v-slot="date">
					<el-tag v-if="date.row.status">在职</el-tag>
					<el-tooltip v-else :content="date.row.leaveDate" placement="top">
						<el-tag type="warning">离职</el-tag>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="department" label="所属部门"></el-table-column>
			<el-table-column prop="joinDate" label="入职时间"></el-table-column>
			<el-table-column prop="salary" label="薪水">
				 <template v-slot="item">
					<span>¥{{item.row.salary}}</span>
				</template>
			<!-- </el-table-column>
			<el-table-column  label="操作">
				<template v-slot="date">
					<el-button size="small" type="danger" @click="deleteItem(date.row.id)">删除</el-button>
					<el-button size="small" type="info"  @click="handleEdit(date.row)">编辑</el-button>
				
					<el-dialog :visible="dialogVisible" title="编辑员工信息" width="700px">
					<el-form label-width="100px">
						<el-form-item label="员工姓名">
							<el-input type="text" v-model="newItems.name"></el-input>
						</el-form-item>
						<el-form-item label="年龄">
							<el-input type="number" v-model="newItems.age"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio-group v-model="newItems.sex">
								<el-radio-button :label="1">男</el-radio-button>
								<el-radio-button :label="0">女</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="所属部门">
							<el-select v-model="newItems.department" placeholder="请选择">
								<el-option value="技术部"></el-option>
								<el-option value="市场部"></el-option>
								<el-option value="行政部"></el-option>
								<el-option value="安保部"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="薪资">
							<el-input type="number" v-model="newItems.salary"></el-input>
						</el-form-item>
						<el-form-item label="入职时间">
							<el-date-picker type="date" :picker-options="joinDateOptions" placeholder="选择日期" v-model="newItems.joinDate" value-format="yyyy-MM-dd"></el-date-picker>
						</el-form-item>
						<el-form-item label="是否在职">
							<el-radio-group v-model="newItems.status">
								<el-radio-button :label="1">在职</el-radio-button>
								<el-radio-button :label="0">离职</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="离职时间" v-if="!newItems.joinDate">
							<el-date-picker type="date" placeholder="选择日期" v-model="newItems.leaveDate" value-format="yyyy-MM-dd" :picker-options="leaveDateOptions"></el-date-picker>
						</el-form-item>
					</el-form>

					<div slot="footer">
						<el-button @click="dialogVisible=false">取消</el-button>
						<el-button type="primary" @click="amendData">确认修改</el-button>
					</div>
					</el-dialog>
				</template>
			</el-table-column> -->
		<!-- </el-table> -->
		<!-- <salarys  id="salarys" style="width: 1000px;height: 400px;"></salarys> -->
	</div>


	<script type="text/javascript">


		var person = Vue.component("person",{
			template:`
				<div>
					<el-button type="primary" icon="el-icon-plus" class="next" @click="dialogVisibles=true">新增员工</el-button>
				<el-dialog :visible="dialogVisibles" title="新增员工" width="500px">
					<el-form label-width="100px">
						<el-form-item label="员工姓名">
							<el-input type="text" v-model="newItem.name"></el-input>
						</el-form-item>
						<el-form-item label="年龄">
							<el-input type="number" v-model="newItem.age"></el-input>
						</el-form-item>
						
						<el-form-item label="性别">
							<el-radio-group v-model="newItem.sex">
								<el-radio-button :label="1">男</el-radio-button>
								<el-radio-button :label="0">女</el-radio-button>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="所属部门">
							<el-select v-model="newItem.department" placeholder="请选择">
								<el-option value="技术部"></el-option>
								<el-option value="市场部"></el-option>
								<el-option value="行政部"></el-option>
								<el-option value="安保部"></el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="薪资">
							<el-input type="number" v-model="newItem.salary"></el-input>
						</el-form-item>
						
						<el-form-item label="入职时间">
							<el-date-picker type="date" :picker-options="joinDateOptions" placeholder="选择日期" v-model="newItem.joinDate" value-format="yyyy-MM-dd"></el-date-picker>
						</el-form-item>
						
						<el-form-item label="是否在职">
							<el-radio-group v-model="newItem.status">
								<el-radio-button :label="1">在职</el-radio-button>
								<el-radio-button :label="0">离职</el-radio-button>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="离职时间" v-if="!newItem.status">
							<el-date-picker type="date" placeholder="选择日期" v-model="newItem.leaveDate" value-format="yyyy-MM-dd"></el-date-picker>
						</el-form-item>
					</el-form>

					<div slot="footer">
						<el-button @click="dialogVisibles=false">取消</el-button>
						<el-button type="primary" @click="addData">确认新增</el-button>
					</div>	
				</el-dialog>

		
		

		<el-table :data="person" stripe>
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="age" label="年龄">
			</el-table-column>
			<el-table-column prop="sex" label="性别">
				<template v-slot="date">
					<span>{{date.row.sex?"男":"女"}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="在职状态">
				<template v-slot="date">
					<el-tag v-if="date.row.status">在职</el-tag>
					<el-tooltip v-else :content="date.row.leaveDate" placement="top">
						<el-tag type="warning">离职</el-tag>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="department" label="所属部门"></el-table-column>
			<el-table-column prop="joinDate" label="入职时间"></el-table-column>
			<el-table-column prop="salary" label="薪水">
				<!-- <template v-slot="item">
					<span>¥{{item.row.salary}}</span>
				</template> -->
			</el-table-column>
			<el-table-column  label="操作">
				<template v-slot="date">
					<el-button size="small" type="danger" @click="deleteItem(date.row.id)">删除</el-button>
					<el-button size="small" type="info"  @click="handleEdit(date.row)">编辑</el-button>
				
					<el-dialog :visible="dialogVisible" title="编辑员工信息" width="700px">
					<el-form label-width="100px">
						<el-form-item label="员工姓名">
							<el-input type="text" v-model="newItems.name"></el-input>
						</el-form-item>
						<el-form-item label="年龄">
							<el-input type="number" v-model="newItems.age"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio-group v-model="newItems.sex">
								<el-radio-button :label="1">男</el-radio-button>
								<el-radio-button :label="0">女</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="所属部门">
							<el-select v-model="newItems.department" placeholder="请选择">
								<el-option value="技术部"></el-option>
								<el-option value="市场部"></el-option>
								<el-option value="行政部"></el-option>
								<el-option value="安保部"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="薪资">
							<el-input type="number" v-model="newItems.salary"></el-input>
						</el-form-item>
						<el-form-item label="入职时间">
							<el-date-picker type="date" :picker-options="joinDateOptions" placeholder="选择日期" v-model="newItems.joinDate" value-format="yyyy-MM-dd"></el-date-picker>
						</el-form-item>
						<el-form-item label="是否在职">
							<el-radio-group v-model="newItems.status">
								<el-radio-button :label="1">在职</el-radio-button>
								<el-radio-button :label="0">离职</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="离职时间" v-if="!newItems.joinDate">
							<el-date-picker type="date" placeholder="选择日期" v-model="newItems.leaveDate" value-format="yyyy-MM-dd" :picker-options="leaveDateOptions"></el-date-picker>
						</el-form-item>
					</el-form>

					<div slot="footer">
						<el-button @click="dialogVisible=false">取消</el-button>
						<el-button type="primary" @click="amendData">确认修改</el-button>
					</div>
					</el-dialog>
				</template>
			</el-table-column>
		</el-table>
	</div>
	`,
	data(){
				return{
					activeIndex2:"1",
					joinDateOptions:{
						disabledDate(time){
							return time.getTime() > Date.now();
						}
					},
					person:[],
					dialogVisible:false,
					dialogVisibles:false,
					newItem:{
						name:'',
						age:0,
						sex:1,
						status:1,
						department:"技术部",
						joinDate:"",
						salary:0,
						leaveDate:""
					},
					newItems:{
						name:'',
						age:0,
						sex:1,
						status:1,
						department:"技术部",
						joinDate:"",
						salary:0,
						leaveDate:""
					},
					joinDateOptions:{
						disabledDate(time){
							return time.getTime() > Date.now();
						}
					},
					leaveDateOptions:{
						disabledDate(time){
							return time.getTime() < Date.now();
						}
					}


				}
			},
			mounted(){
				axios.get('http://192.168.0.8:8088/getData').then((response)=> {
					this.person = response.data
				})


				


				// var http = new XMLHttpRequest();
				// http.open("GET","http://192.168.0.8:8088/getData",false);
				// http.send();
				// this.person = JSON.parse(http.responseText);
			},
			methods:{
				handleEdit(row){
					this.dialogVisible = true;
					this.newItems.id = row.id
					this.newItems.name = row.name;
					this.newItems.age = row.age;
					this.newItems.sex = row.sex;
					this.newItems.status = row.status;
					this.newItems.department = row.department;
					this.newItems.joinDate = row.joinDate
					this.newItems.salary = row.salary;
					this.newItems.leaveDate = row.leaveDate;
      			},

				deleteItem(id){
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						type: 'warning'
						}).then(() => {
							axios.get(`http://192.168.0.8:8088/deleteData?id=${id}`).then((response)=> {
								if(response.data==="success"){
									this.$message({
										message:"恭喜你,删除成功",
										type:"success"
									})
									for(var i=0;i<this.person.length;i++){
										if(this.person[i].id===id){
											this.person.splice(i,1)
											break;
										}
									}
								}
								else{
									this.$message.error("操作失败")
								}

							})
						}).catch(() => {
							this.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
				},
				addData(){
					this.dialogVisibles = false;
					
					axios.get(`http://192.168.0.8:8088/addData`,{
						params:this.newItem
					}).then((response)=>{
						if(response.data === "success"){
							
							this.$message({
								message:"添加员工信息成功",
								type:"success"
							})
							
							
							axios.get("http://192.168.0.8:8088/getData").then((response)=>{
								this.person = response.data;
							})							
						}
						
					})
				},
				amendData(){
					this.dialogVisible = false;
					
					axios.get(`http://192.168.0.8:8088/amendData`,{
						params:this.newItems
					}).then((response)=>{
						if(response.data === "success"){
							this.$message({
								message:"修改员工信息成功",
								type:"success"
							})


							axios.get("http://192.168.0.8:8088/getData").then((response)=>{
								this.tableData = response.data;
							})
							
						}	
				})
			}
	
			}
				


		})




		var salarys = Vue.component("salarys",{
		template:`
			<div id="salarys">

			</div>`,
		data(){
			return{
				datalist:[]
			}
		},
		computed:{
			datatable(){
				var a = [];
				for(var i of this.datalist){
					var b = [];
					b[0] = i.name;
					b[1] = i.salary;
					a.push(b);
				}
				return a;
			}
		},
		mounted(){
			axios.get("http://192.168.0.8:8088/getSalary").then((response)=>{
				this.datalist = response.data;
				Highcharts.chart('salarys', {
					chart:{
						type: 'column'
					},
					title:{
						text: '员工工资统计'
					},
					xAxis:{
						type: 'category',
						labels: {
							rotation: -45
						}
					},
					legend: {
						enabled: false
					},
					series: [{
						data: this.datatable
					}]
				});
			});
		},
	})


		const router = new VueRouter({
			routes:[
				{ path: '/person', component: person },
				{ path: '/salary', component: salarys }
			]
		})



		var root = new Vue({
			el:"#root",
			data(){
				return {
					ActiveIndex:"1",
				}
			},
			router,
			

		})
	</script>
</body>
</html>
